<template>
	<view class="index_budget index_list_box base_box "  @click="handleClick" :class="props.ringClick?'clickBox':''">
		<view class="index_budget_ring">
			<RingShowVue title="已使用" :all="parseFloat(theMonthYusuanSum?.data)" :have="theMonthData?.expenses"
				:canClick="props.ringClick" />
		</view>
		<view class="index_budget_textBox">
			<view class="index_budget_textBox_title oneLine">
				月总预算
			</view>
			<view class="index_budget_textBox_text line-clamp-2">
				{{theMonthYusuanSum?.data}}
			</view>
		</view>
		<view class="index_budget_textBox">
			<view class="index_budget_textBox_title oneLine">
				剩余日均
			</view>
			<view class="index_budget_textBox_text line-clamp-2" @click="isWhyHaveDayOverOpen()">
				{{haveDayOver}}
			</view>
		</view>
	</view>
	<myPopupVue ref="isWhyHaveDayOver">
		<view class="whyHaveDayOver">
			<view class="popup_title">
				剩余日均计算公式:
			</view>
			<view class="whyHaveDayOver_main">
				<view class="whyHaveDayOver_text">
					(月总预算-本月支出)/本月剩余日数
				</view>
				<view class="whyHaveDayOver_number" v-if="haveDayOver">
					{{`(${theMonthYusuanSum.data} - ${theMonthData.expenses}) / ${remainingDay}`}}
				</view>
			</view>
		</view>
	</myPopupVue>
</template>

<script setup>
	import myPopupVue from '@/components/base/myPopup.vue';
	import RingShowVue from '@/components/RingShow.vue';
	import {
		ref,
		defineProps,
		computed,
		onMounted,
		warn,
		watch
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import store from "@/store/index.js"
	const props = defineProps({
		time: String,
		ringClick: {
			type: Boolean,
			default: () => false
		}
	})
	const theMonthData = computed(() => store.state.useData.theMonthData) // 记录消费
	const theMonthYusuanSum = computed(() => store.state.useData.theMonthYusuanSum) // 预算总计
	onLoad(() => {
		if (Object.keys(theMonthData.value).length == 0 || theMonthData.value.time != props.time) {
			store.commit("useData/getTheMonthData", props.time)
		}
		if (Object.keys(theMonthYusuanSum.value).length == 0 || theMonthData.value.time != props.time) {
			store.commit("useData/getTheMonthYusuanSum", props.time)
		}
	})
	watch(() => store.state.mainData.allData[props.time], (n) => { // 添加记录要更新
		if (store.state.mainData.allData.hasOwnProperty(props.time)) {
			store.commit("useData/getTheMonthData", props.time);
		}
	}, {
		deep: true
	});
	watch(() => store.state.mainData.yusuanData[props.time], (n) => {
		store.commit("useData/getTheMonthYusuanSum", props.time);
	}, {
		deep: true
	});
	watch(() => props.time, (n) => {
		store.commit("useData/getTheMonthData", props.time);
		store.commit("useData/getTheMonthYusuanSum", props.time);
	})
	const haveDayOver = computed(() => { // 剩余日均
		if (theMonthYusuanSum.value == void 0 || Object.keys(theMonthYusuanSum.value).length == 0) return "0";
		if (remainingDay.value == 0) return theMonthYusuanSum.value.data
		if (theMonthYusuanSum.value.data - theMonthData.value.expenses < 0) return "预算已用完";
		return ((theMonthYusuanSum.value.data - theMonthData.value.expenses) / remainingDay.value).toFixed(2)
	})
	const remainingDay = ref(1) // 本月 剩余日期
	const takeRemainingDay = () => {
		const today = new Date();
		const currentYear = today.getFullYear();
		const currentMonth = today.getMonth() + 1;
		const lastDayOfMonth = new Date(currentYear, currentMonth, 0);
		// 获取当前月份最后一天的日期  
		const lastDate = lastDayOfMonth.getDate();
		const todayDate = today.getDate();
		remainingDay.value = lastDate - todayDate;
	}
	takeRemainingDay()
	const isWhyHaveDayOver = ref()
	const isWhyHaveDayOverOpen = () => {
		if (props.ringClick) isWhyHaveDayOver.value.open()
	}
	const emit = defineEmits(['click']);
	// 点击事件处理函数  
	function handleClick() {
		emit('click');
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.index_budget {
		display: flex;
		justify-content: space-between;
		align-items: center;

		&_ring {
			height: 100px;
		}

		&_textBox {
			flex: 1;
			margin: 0.5em;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: $midFontsize;

			&_title {
				font-size: $smallFontsize;
				color: $baseBlack_big;
			}

			&_text {
				word-break: break-all;
			}
		}
	}

	.whyHaveDayOver {
		padding: 0 1em 1em 1em;
		width: $bigPopupWidth;

		&_main {
			display: flex;
			flex-direction: column;
			margin-left: 0.5em;
		}

		&_text {
			font-size: $midFontsize;
			color: $baseBlack_big;
		}

		&_number {}
	}
</style>